<template>
  <div ref="chart" style="width: 100%;height: 400px;"></div>
</template>


<script>
  export default {
    data() {
      return {

      }
    },
   mounted() {
  	 this.initChart()
  	 },
    methods: {
      initChart() {

        var myChart = this.$echarts.init(this.$refs.chart);
        var option;

        option = {
          title: {
           text: '各技术频道文章统计', // 主标题
           left: 'center' // 居中

          },
          tooltip: {
          // 鼠标放上去显示的格式
           trigger: 'item',
           formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
           // 左上角数据
            orient: 'vertical', // 垂直
            left: 'left', // 左侧
          },
          series: [
            {
               name: '统计内容', //鼠标放上去显示文字
               type: 'pie', // 饼图
               radius: '55%', // 圆大小
               center: ['50%', '50%'], // 饼图位置【左，上】
              data: [
                 {value: 335, name: '前端'},
                 {value: 310, name: 'Java'},
                 {value: 234, name: '移动端'},
                 {value: 135, name: '大数据'},
                 {value: 1548, name: '人工智能'},
                 {value: 1548, name: '区块链'}
              ],
              emphasis: {
               itemStyle: { // 图形样式
               shadowBlur: 10, // 图形阴影的模糊大小
               shadowOffsetX: 0, // 阴影水平方向上的偏移距离
               shadowColor: 'rgba(0, 0, 0, 0.5)' ,//阴影颜色
               }
              }
            }
          ]
        };

        option && myChart.setOption(option);

      }
    }
   }
  </script>
<style>

</style>
